<template>
  <div>
    <SearchForm v-model:form="formData" @search="handleSearch" />
    <PaginationCard
      v-model:current-page="paginationData.currentPage"
      v-model:page-size="paginationData.pageSize"
      :load-list="getTableData"
      :total="paginationData.total"
    >
      <template #header>
        <el-button type="success" @click="handleUpload"> 上传 </el-button>
      </template>
      <AppTable
        ref="appTableRef"
        v-loading="isLoading"
        :data="tableData"
        :columns="columns"
        border
        :row-key="getRowKey"
        @selection-change="handleSelectionChange"
        @sort-change="handleSortChange"
      />
    </PaginationCard>
    <UploadDialog
      v-model:visible="isVisible"
      @success="handleUploadSuccess"
    ></UploadDialog>
  </div>
</template>

<script lang="tsx" setup>
import { computed, onBeforeMount, ref } from 'vue'
import { useRouter } from 'vue-router'

import AppButtonGroup from '@/components/AppButtonGroup/index.vue'
import { IButtonConfig } from '@/components/AppButtonGroup/type'
import AppTable from '@/components/AppTable/index.vue'
import PaginationCard from '@/components/PaginationCard/index.vue'
import usePagination from '@/hooks/usePagination'
import { deleteModel, downloadModel, getModels } from '@/http/models'
import { IModel } from '@/http/types/models'
import downloadJs from '@/plugins/download'
import { formatFileSize } from '@/utils'

import SearchForm from './components/SearchForm.vue'
import UploadDialog from './components/UploadDialog.vue'

const getRowKey = (row: IModel) => row.id

const router = useRouter()

const buttonConfig: IButtonConfig[] = [
  {
    name: '下载模型',
    eventName: 'handleDownload',
    type: 'primary',
    link: true,
  },
  {
    name: '删除模型',
    eventName: 'handleDelete',
    type: 'danger',
    link: true,
    isConfirm: true,
    confirmMessage: '删除模型，是否继续？',
  },
  {
    name: '点标注',
    eventName: 'handleLabel',
    type: 'primary',
    link: true,
  },
  {
    name: '分割标注',
    eventName: 'handleSegmentLabel',
    type: 'primary',
    link: true,
  },
]
const columns = ref([
  {
    label: '模型名称',
    prop: 'displayName',
    minWidth: 100,
  },
  {
    label: '模型后缀',
    prop: 'fileExtension',
  },
  {
    label: '模型大小',
    prop: 'contentLength',
    width: 140,
    render: ({ row }: { row: IModel }) => {
      return <p>{formatFileSize(row.contentLength)}</p>
    },
  },
  {
    label: '操作',
    fixed: 'right',
    width: 300,
    render: ({ row }: { row: IModel }) => {
      return (
        <AppButtonGroup
          maxNumber={4}
          buttonConfigs={buttonConfig}
          rowData={row}
          onEvent={(eventName: string) => {
            eventName === 'handleDownload' && handleDownload(row)
            eventName === 'handleLabel' && handleLabel(row)
            eventName === 'handleDelete' && handleDelete(row)
            eventName === 'handleSegmentLabel' && handleSegmentLabel(row)
          }}
        ></AppButtonGroup>
      )
    },
  },
])

const handleLabel = (row: IModel) => {
  const { href } = router.resolve({
    name: 'LabelPoint',
    params: {
      id: row.id,
    },
  })
  window.open(href, '_blank')
}

const handleSegmentLabel = (row: IModel) => {
  const { href } = router.resolve({
    name: 'LabelSegment',
    params: {
      id: row.id,
    },
  })
  window.open(href, '_blank')
}

const handleDelete = async (row: IModel) => {
  await deleteModel(row.id)
  getTableData()
}

const handleDownload = async (value: IModel) => {
  const res = await downloadModel({
    modelId: value.id,
  })
  downloadJs(res.blob, res.fileName || value.displayName + value.fileExtension)
}

const formData = ref({
  name: '',
  bookId: '',
  taskOwnerId: '',
})

const selectionTaskIds = ref<string[]>([])
const handleSelectionChange = (value: IModel[]) => {
  selectionTaskIds.value = value.map((item) => item.id)
}

const params = computed(() => {
  return {
    modelName: formData.value.name,
    fileExtension: '',
  }
})
const {
  isLoading,
  paginationData,
  tableData,
  getTableData,
  handleSearch,
  handleSortChange,
} = usePagination(getModels, params)

onBeforeMount(() => {
  getTableData()
})

const isVisible = ref(false)
const handleUpload = () => {
  isVisible.value = true
}

const handleUploadSuccess = () => {
  isVisible.value = false
  getTableData()
}
</script>

<style lang="scss" scoped></style>
